<#include "/head.ftl"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            配置管理平台
        </div>
        <ol class="am-breadcrumb">
            <li><a href="/" class="am-icon-home">首页</a></li>
            <li><a href="/config/list">配置文件</a></li>
            <li class="am-active">配置列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 配置列表
                </div>
            </div>
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <button type="button" class="am-btn am-btn-default am-btn-success" onclick="openDialog('0');"><span class="am-icon-plus"></span> 新增</button>
                            </div>
                        </div>
                    </div>

                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                            <input id="i_search" type="text" class="am-form-field">
                            <span class="am-input-group-btn">
                                <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search" type="button" onclick="buttonQuery();"></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <form class="am-form">
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                <tr>
                                    <th class="table-title">名称</th>
                                    <th class="table-type">服务器地址</th>
                                    <th class="am-hide-sm-only">是否可用</th>
                                    <th class="table-date am-hide-sm-only">创建日期</th>
                                    <th class="table-set">操作</th>
                                </tr>
                                </thead>
                                <tbody id="i_tbody">

                                </tbody>
                            </table>
                            <div class="am-cf">

                                <div class="am-fr">
                                    <ul id="i_ul_page" class="am-pagination tpl-pagination">

                                    </ul>
                                </div>
                            </div>
                            <hr>

                        </form>
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>


<!-- dialog的div
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm" data-am-validator>
    <div class="am-modal-dialog">
        <div class="am-modal-hd" id="i_dialog_title">新增配置1111</div>
        <div class="am-modal-bd">
           <form action="" class="am-form" id="i-dialog-form">
               <div class="am-form-group">
                   <label for="i-form-serverName" class="am-form-label am-text-right am-padding-right-0">服务器名称</label>
                   <input type="text" id="i-form-serverName"  minlength="1"
                          placeholder="输入服务器名称" data-foolish-msg="请输入服务器名称" required/>
               </div>

           </form>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
-->

<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/app.js"></script>
<script>

    $("#i_li_config a").addClass("active");
    $("#i_li_config a i:last").addClass("tpl-left-nav-more-ico-rotate");
    $("#i_li_config ul").attr("style","display:block");


    //全局变量,每页多少条数据
    var rows = 5;

    //页面加载时调用一次,获取数据
    buttonQuery();

    /**
     * 打开dialog窗口
     * 如果参数是'0',表示新建,其他参数为修改
     */
    function openDialog(id){

        location.href = "/config/edit";
    }




    //点击搜索按钮执行的方法
    function buttonQuery(){
        queryList(1);
    }

    //调用接口查询后台列表数据
    function queryList(page){
        //搜索关键字
        var keyword = $("#i_search").val();
        $.ajax({
            url : '/config/queryList',
            type : 'post',
            dataType : 'json',
            data : {
                keyword: keyword,
                page: page,
                rows: rows
            },
            success : function(result){
                if(result){
                    var count = result.count;
                    if(count>0){
                        //先清除表单
                        $("#i_tbody").html('');
                        //清除分页条
                        $("#i_ul_page").html('');

                        $.each(result.rows,function(index,value){

                            var tr = $("<tr></tr>");
                            var tdName = $("<td><a href='#'>"+value.serverName+"</td>");
                            var tdHost = $("<td class='am-hide-sm-only'>"+value.serverHost+"</td>");
                            var usable = value.usable;
                            var tdusable;
                            if(usable=='可用'){
                                tdusable = $("<td class='am-hide-sm-only' style='color: deepskyblue'>可用</td>");
                            }else{
                                tdusable = $("<td class='am-hide-sm-only' style='color: red'>不可用</td>");
                            }
                            var tdcreateTime = $("<td class='am-hide-sm-only'>"+value.createTime+"</td>");
                            var op = $(" <td> <div class='am-btn-toolbar'> <div class='am-btn-group am-btn-group-xs'> <button class='am-btn am-btn-default am-btn-xs am-text-secondary'> <span class='am-icon-pencil-square-o'></span> 编辑</button> <button class='am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only'> <span class='am-icon-trash-o'></span> 删除 </button> </div> </div> </td>");
                            tr.append(tdName);
                            tr.append(tdHost);
                            tr.append(tdusable);
                            tr.append(tdcreateTime);
                            tr.append(op);
                            $("#i_tbody").append(tr);
                        });

                        var pageCount;
                        pageCount = Math.ceil(count/rows);
                        console.info("pageCount:"+pageCount+"   count:"+count+"   page:"+page);

                        //分页条
                        var preli;
                        if(page==1){
                            preli = $("<li class='am-disabled'><a href='#'>«</a></li>")
                        }else{
                            preli = $("<li><a href='javascript:queryList(1);'>«</a></li>")
                        }
                        $("#i_ul_page").append(preli);
                        for(var i=1;i<=pageCount;i++){
                            var li;
                            if(i==page){
                                li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                            }else{
                                li = $("<li><a href='javascript:queryList("+i+");'>"+i+"</a></li>")
                            }
                            $("#i_ul_page").append(li);
                        }
                        var sufli;
                        if(page==pageCount){
                            sufli = $("<li class='am-disabled'><a href='#'>»</a></li>")
                        }else{
                            sufli = $("<li><a href='javascript:queryList("+pageCount+");'>»</a></li>")
                        }
                        $("#i_ul_page").append(sufli);

                    }
                }
            }
        });
    }
</script>
</script>
</body>
</html>